<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>
		<!-- <customNavBar1 :title="title"></customNavBar1> -->
		<view class="rementuij">
			<!-- <view @click="activeTab = 'tab1'">Tab 1</view>
	    <view @click="activeTab = 'tab2'">Tab 2</view> -->
			<view class="lvyougl">
				<view class="minsujiudian" @click="yfzx(1, 7)" :class="{ 'minsuactive': yfzxact == 1 }">
					新闻资讯
				</view>
				<view class="minsujiudian" @click="yfzx(4, 8)" :class="{ 'minsuactive': yfzxact == 4 }">
					就诊资讯
				</view>
			</view>

			<view class="jumin" v-if="yfzxact == 1">
				<view class="concat-list">
					<view class="list" v-for="(item, index) in userList" :key="index" @click="news(item)">
						<view class="left">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="text">
								{{ item.realName }} | {{ item.createDate }}
							</view>
						</view>
						<view class="right">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
					<nodata v-if="userList.length === 0"></nodata>
				</view>

			</view>

			<view class="jumin" v-if="yfzxact == 4">
				<view class="concat-list">
					<view class="list" v-for="(item, index) in userList" :key="index" @click="news(item)">
						<view class="left">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="text">
								{{ item.realName }} | {{ item.createDate }}
							</view>
						</view>
						<view class="right">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
					<nodata v-if="userList.length === 0"></nodata>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				title: '资讯信息',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fromData: {
					page: 1,
					limit: 10,
					type: 7
				},
				fromList: {
					page: 1,
					limit: 10,
					type: null
				},
				ProductList: {},
				userList: {},
				status: 'more', //加载状态
				yfzxact: 1
			}
		},
		onLoad() {
			this.getData()
		},
		//上拉加载
		onReachBottom() {
			console.log(this.status, '-----');
			if (this.status != 'noMore') {
				this.status = 'loading'
				this.fromData.page++
				// uni.showNavigationBarLoading()
				this.getList()
			}
		},
		methods: {
			yfzx(e, index) {
				console.log(e, index);
				this.yfzxact = e;

				if (index !== undefined) {
					if (e == 1 || e == 4) {
						this.fromData.type = index
						this.getNews()
					}
					if (e == 2 || e == 3) {
						this.fromList.type = index
						this.getProduct()
					}

				}
			},
			news(item) {
				uni.navigateTo({
					url: '/pagesService/news/newsDetails?id=' + item.id
				})
			},
			getList() {
				let that = this
				this.$api.get('/api/newsInformation/page', this.fromData).then(res => {
					if (res.data.code === 0) {
						let {
							list,
							total
						} = res.data.data;
						if (that.userList.length + list.length > total || list.length == 0)
							return that.isOver = true;
						that.userList = [...that.userList, ...list];
						console.log('新闻资讯', that.userList);
					} else that.$showToast(res.data.msg);
				});
			},

			getData() {
				this.fromData.page = 1
				this.$api.get('/api/newsInformation/page', this.fromData).then(res => {
					this.userList = res.data.data.list;
				});
			},

			//新闻资讯  就诊资讯
			getNews() {
				this.fromData.page = 1
				this.$api.get('/api/newsInformation/page', this.fromData).then(res => {
					this.userList = res.data.data.list;
				});
			},


			// 获取菜价 农副产品
			getProduct() {
				this.fromData.page = 1
				this.$api.get('/api/vagetableprice/getNew', this.fromList).then(res => {
					this.ProductList = res.data.data;

				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.concat-list {
		// display: flex;
		padding: 24rpx;
		// height: 1600rpx;

		.list {
			display: flex;
			padding: 30rpx 0 36rpx;
			border-top: 1rpx solid #EFEFEF;
		}

		.left {
			width: 468rpx;

			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 30rpx;
				margin-right: 24rpx;
				width: 468rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 指定最大行数 */
				-webkit-box-orient: vertical;
				/* 垂直排列文本 */
				overflow: hidden;

			}

			.text {
				font-size: 26rpx;
				font-weight: Regular;
				color: #999999;
			}
		}

		.right {
			width: 210rpx;
			height: 142rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.rementuij {
		width: 710rpx;
		margin: 0 auto;
	}

	.lvyougl {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 108rpx;
		// background-image: url('https://i.ringzle.com/file/20231219/e8eac48eac6649199796fb20fd9f109c.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}

	.lvyougl {
		width: 710rpx;
		height: 100rpx;
	}

	.minsujiudian {
		width: 48%;
		height: 57rpx;
		border-radius: 32rpx;
		border: 1px solid #cccccc;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 57rpx;
		text-align: center;
	}

	.minsuactive {
		background: #007A69;
		color: #fff !important;
	}

	.jumin {
		// display: flex;
		// justify-content: space-between;
		// flex-wrap: wrap;
	}

	.cuisine {
		.hander {
			font-size: 28rpx;
			color: #333;
			font-weight: Regular;

			.two {
				margin: 16rpx 0;
			}
		}

		.text {
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #666666;
			font-weight: Regular;

			.concentrate {
				font-size: 24rpx;
				color: #FF4141;
				font-weight: Regular;
			}
		}
	}

	.table {
		width: 710rpx;
	}

	.yunying-2 {
		box-sizing: border-box;
		width: 100%;
		height: 124rpx;
		display: flex;
		text-align: center;
		margin: 0 auto;
	}

	.yuefen-2 {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		display: flex;
	}

	.yunying22 {
		box-sizing: border-box;
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #192942;

	}

	.yunying2 {
		border: 0.5rpx solid #CCCCCC;
		box-sizing: border-box;
		width: 50%;
		height: 124rpx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		// line-height: 124rpx;
	}

	.yunying2>view {
		margin: 0 auto;
	}

	.yunying22 {
		box-sizing: border-box;
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 0.5rpx solid #e6e6e6;
		font-size: 24rpx;
		color: #333;
		font-weight: Regular;

	}
</style>